<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useI18n } from 'vue-i18n';
import { dialog } from '@/settings/components/dialog';

const props = defineProps({
  id: {
    type: String,
    default: '',
  },
});

const atomgitUrl = import.meta.env.VITE_ATOMGIT_URL;

const listing = ref([]);
const pager = ref({});
const loading = ref(false);
const search = ref();
const { success } = useNotification();
const { t } = useI18n();
const title = ref('');

const getDetail = async () => {
  const { isSuccess, data } = await $fetch('/admin/atomgitPopSpecialColumn/getColumnDetail', {
    method: 'post',
    data: {
      columnId: props.id,
    },
  });

  if (isSuccess) {
    title.value = data.columnName;
  }
}

const refresh = async (page = 1) => {
  const { isSuccess, data } = await $fetch('/admin/atomgitPopSpecialColumn/getColumnInfoList', {
    method: 'post',
    data: {
      columnId: props.id,
      pageNum: page,
      pageSize: 20,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    listing.value = data.records;

    pager.value = {
      current: page,
      total: data.total,
    };
  }
}

const remove = async (id: string) => {
  const { isSuccess } = await $fetch('/admin/atomgitPopSpecialColumn/deleteInfo', {
    method: 'post',
    data: {
      columnId: props.id,
      informationId: id,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.del'));
    search.value.refresh();
  }
};

const add = async () => {
  const { button } = await dialog(() => import('./add-window.vue'), {
    title: t('settings.view.column.detail.add.title'),
    width: 800,
    props: {
      id: props.id,
    },
  });

  if (button == 'ok') {
    search.value.refresh();
  }
}

onMounted(() => {
  getDetail();
  refresh();
});
</script>

<template>
  <OpenPageSection>
    <OpenSearchTable
      :pager="pager"
      :data="listing"
      :loading="loading"
      :title="`${$t('settings.menu.direction.column.detail.index')}${title ? ` - ${title}` : ''}`"
      @search="refresh"
      ref="search"
    >
      <template #header-button>
        <OpenRouterButton to="/direction/column/listing/index">
          <template #icon>
            <IconUndo />
          </template>
          {{ $t('settings.action.goBack') }}
        </OpenRouterButton>
        <AButton @click="add" type="primary">{{ $t('settings.action.add1') }}</AButton>
      </template>

      <template #columns>
        <ATableColumn :title="$t('settings.view.column.detail.index.column')" data-index="informationTitle" tooltip ellipsis />
        <ATableColumn :title="$t('settings.view.column.detail.index.introduce')" data-index="informationMsg" tooltip ellipsis />

        <ATableColumn :title="$t('settings.view.column.detail.index.author')" :width="200">
          <template #cell="{ record }">
            <ALink :href="`${atomgitUrl}/${record.createName}`" target="_blank">
              {{ record.createNickName || record.createName }}
            </ALink>
          </template>
        </ATableColumn>

        <ATableColumn :title="$t('settings.view.column.detail.index.view')" data-index="viewCount" :width="120" />
        <ATableColumn :title="$t('settings.view.column.detail.index.like')" data-index="likeCount" :width="120" />
        <ATableColumn :title="$t('settings.view.column.detail.index.collection')" data-index="collectionCount" :width="120" />
        <ATableColumn :title="$t('settings.view.column.detail.index.time')" data-index="publishTime" :width="180" />

        <ATableColumn :title="$t('settings.action.column1')" :width="100">
          <template #cell="{ record }">
            <div class="button-actions">
              <AButton type="primary" status="danger" size="small" v-confirm @click="remove(record.informationId)">
                {{ $t('settings.action.delete') }}
              </AButton>
            </div>
          </template>
        </ATableColumn>
      </template>
    </OpenSearchTable>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
